<template>
	<view class="xihuQuan">
		<view class="menus dFlex jAround_aCenter">
			<view :class="['menuOne',status == '1'?'active':'']" @tap='changeMenu("1")'>
				<text>未使用</text>
				<view class="line"></view>
			</view>
			<view :class="['menuOne',status == '2'?'active':'']" @tap='changeMenu("2")'>
				<text>已使用</text>
				<view class="line"></view>
			</view>
			<!-- <view :class="['menuOne',status == '3'?'active':'']" @tap='changeMenu("3")'>
				<text>已过期</text>
				<view class="line"></view>
			</view> -->
		</view>
		<view class="list" v-if="list.length">
			<view :class="['quanOne','dFlex','jBetween_aStart',status == '3'?'hui':'']" v-for="(item,index) in list" :key='index'>
				<view class="quanCount dFlex jCenter_aCenter">
					<view v-if="item.user_type == '1'">￥<text>{{item.amount}}</text></view>
					<view v-if="item.user_type == '2'"><text>{{item.zhekou}}折</text></view>
				</view>
				<view class="quanInfo dFlex jBetween_aCenter">
					<view class="info">
						<view class="quanName dFlex jBetween_aCenter">
							<text>{{item.name}}</text>
							<!-- <view class="use" v-if="status == '1'">立即使用</view> -->
						</view>
						<view class="suit">适用于：订单抵扣</view>
						<view class="time">有效期：{{item.stop_time}}</view>
					</view>
					<view class="statusIcon imgPublic" v-if="status == '2'">
						<!-- <image src="https://wx.gdxixiashi.com/public/images/home/guoqi@2x.png" mode="widthFix"></image> -->
						<image src="https://wx.gdxixiashi.com/public/images/home/shiyong.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="list empty imgPublic" v-else>
			<image src="../static/images/empty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status:'1',// 1未使用 2已使用
				list:[],
			};
		},
		onShow(){
			if(uni.getStorageSync('userId')){
				this.initData();
			}
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			initData(){
				this.tool.getData('User/couponRecord',{
					memberId:uni.getStorageSync('userId'),
					status:this.status,
				}).then(res=>{
					console.log(res);
					if(res){
						this.list = res;
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			changeMenu(status){
				this.status = status;
				this.initData();
			}
		}
	}
</script> 

<style lang="scss">
	.xihuQuan{
		width:100%;
		.list{
			width:100%;
			padding: 12px 4%;
			box-sizing: border-box;
			.quanOne{
				width:100%;
				background: white;
				border-radius: 4px;
				box-sizing: border-box;
				margin-bottom: 12px;
				overflow: hidden;
				.quanCount{
					width: 25%;
					height: 100%;
					color: white; 
					height: 105px;
					font-size: 12px;
					font-weight: bold;
					background: linear-gradient(#1664ff 0%, #609ff8 100%);
					text{
						font-size: 22px;
					}
				}
				.quanInfo{
					flex: 1;
					padding: 12px;
					box-sizing: border-box;
					.info{
						flex: 1;
						.time{
							color: #999999;
							font-size: 12px;
						}
						.suit{
							margin: 10px 0;
							font-size: 12px;
							color: #999999;
						}
						.quanName{
							width: 100%;
							font-size: 15px;
							color: #111111;
							font-weight: bold;
							.use{
								padding: 5px 8px;
								border-radius: 4px;
								color: white;
								background: #1664FF;
								width: max-content;
								font-size: 12px;
							}
						}
					}
					.statusIcon{
						width: 70px;
						height: 70px;
						margin-left: 5px;
					}
				}
			}
			.hui{
				.quanCount{
					background: #CCCCCC;
				}
			}
		}
		.menus{
			width: 100%;
			padding: 12px 0;
			background: white;
			.menuOne{
				flex: 1;
				text-align: center;
				font-weight: bold;
				.line{
					width: 21px;
					height: 2px;
					border-radius: 50px;
					margin: 7px auto 0;
					background: none;
				}
			}
			.active{
				// color: #1664FF;
				.line{
					background: #1664FF;
				}
			}
		}
	}
</style>
